import React from 'react'
import {connect} from 'dva'
import moment from 'moment'
import {Link, browserHistory} from 'dva/router'
import {Table, Row, Col, Form, Input, Icon, InputNumber, Radio, DatePicker, Select, Upload, Button, Switch, Modal, Popconfirm, Tabs, message} from 'antd';
import {exchange} from "../../../services/foreignExchange/foreignExchangeManage";
import BizParams from '../../../components/commons/BizParams'
import CurrencySelect from '../../../components/commons/CurrencySelect'


const FormItem = Form.Item;
const Option = Select.Option;
const Dragger = Upload.Dragger;
const TabPane = Tabs.TabPane;
const RadioGroup = Radio.Group;
const dateFormat = 'YYYY-MM-DD';
const { RangePicker } = DatePicker;

const ForeignExchangeManage = ({routes, params, children, location, dispatch, foreignExchangeManage}) => {
    const {page, search, list, editModel} = foreignExchangeManage;

    let onEdit = (record, type) => {
        let step = "";
        let title = "";

        if(type == "exchange"){
            step = 3;
            title = '外汇结汇';
        }else if(type == "audit"){
            step = 2;
            title = '外汇认领审核';

        }else if(type == "view"){
            step = 3;
            title = '外汇结汇';
        }

        dispatch({
            type: 'foreignExchangeManage/getForexById',
            payload: {
                id: record.id,
                type: type ,
                step: step,
                title: title

            }
        })
    }

    let onDelete = (record,) => {
        dispatch({
            type: 'foreignExchangeManage/deleteForexById',
            payload: {
                id: record.id
            }
        })
    }


    const columns = [{
        title: '收汇时间',
        dataIndex: 'rectime',
        key: 'rectime',
        width: '150px'
    }, {
        title: '收汇金额',
        dataIndex: 'recamount',
        key: 'recamount',
        width: '200px'
    }, {
        title: '收汇币种',
        dataIndex: 'recamountunit',
        key: 'recamountunit',
        width: '120px'
    }, {
        title: '付汇人',
        dataIndex: 'payman',
        key: 'payman',
        width: '100px'
    }, {
        title: '付汇账号',
        dataIndex: 'payaccount',
        key: 'payaccount',
        width: '100px'
    }, {
        title: '状态',
        width: '100px',
        render(record) {
            if(record.status == '0') {
                return '删除';
            } else if(record.status == '1') {
                return '待结汇';
            }else if(record.status == '2') {
                return '待认领';
            }else if(record.status == '3') {
                return '待复核';
            }else if(record.status == '4') {
                return '已确认';
            }else if(record.status == '5') {
                return '复核不通过';
            }
        }
    }, {
        title: '操作',
        width: '150px',
        render(record) {

            let deleteButton =
                <Popconfirm placement="leftTop" title={'数据删除后将不可以恢复，是否继续删除？'} onConfirm={() => {
                    dispatch({
                        type: 'foreignExchangeManage/deleteForexById',
                        payload: {
                            id : record.id
                        }
                    });
                }} okText="是" cancelText="否">
                    <a href=" ">删除</a >
                </Popconfirm>;
            deleteButton = record.status === "1" ? deleteButton : "";
            let split = deleteButton === "" ? "" : <span className="ant-divider"/>;

            if(search.status == undefined || search.status == 0){
                return (
                    <span>
                        <a href="#" onClick={() => onEdit(record, "view")}>查看</a>
                    </span>
                );
            }else{
                return (
                    <span>
                    {record.status === "1" ?
                        <span><a href="#" onClick={() => onEdit(record, "exchange")}>结汇</a> <span
                            className="ant-divider"/> </span> : ""}

                        {record.status === "3" ?
                            <span><a href="#" onClick={() => onEdit(record, "audit")}>审核</a> <span
                                className="ant-divider"/> </span> : ""}

                        <a href="#" onClick={() => onEdit(record, "view")}>查看</a>
                    <span className="ant-divider"/>
                        {deleteButton}
                </span>
                );
            }
        }
    }];

    const formItemLayout = {
        labelCol: {span: 6},
        wrapperCol: {span: 18}
    };

    const handleAdd = function () {
        dispatch({
            type: 'foreignExchangeManage/setEditModel',
            payload: {
                showStatus: true,
                width: editModel.defaultWidth,
                step: 1,
                title: '新增外汇',
                type: 'add'
            }
        });
    }

    const SearchForm = Form.create()(({form}) => {
        const {getFieldDecorator, validateFields} = form;

        const handleSearch = function () {
            validateFields((errors, values) => {
                if (errors) {
                    return
                }

                dispatch({
                    type: 'foreignExchangeManage/setSearch', payload: {
                        search: {
                            payman: values.payman,
                            payaccount: values.payaccount,
                            beginAmt: values.beginAmt,
                            endAmt: values.endAmt,
                            rectime: values.rectime,
                            status: values.status,
                            beginTime: "",
                            endTime: ""

                        }
                    }
                });
                let newPage = page;
                newPage.page = 1;
                dispatch({
                    type: 'foreignExchangeManage/setPage', payload: {
                        page: newPage
                    }
                });
                dispatch({type: 'foreignExchangeManage/getForexList'});
            });
        }

        return (
            <div>
                {/*<Form layout="inline" style={{marginBottom: 20}}> */}
                <Form >
                    <div style={{width: 1250}}>
                        <Row >
                            <Col span={6}>
                                <FormItem {...formItemLayout} label={'付汇人'}>
                                    {getFieldDecorator('payman', {initialValue: search.payman})(
                                        <Input style={{width: 200}}/>
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={5}>
                                <FormItem {...formItemLayout} label={'收汇金额'}>
                                    {getFieldDecorator('beginAmt', {initialValue: search.beginAmt})(
                                        <Input style={{width: 200}}/>
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={3}>
                                <FormItem  {...formItemLayout} label={'至'}>
                                    {getFieldDecorator('endAmt', {initialValue: search.endAmt})(
                                        <Input style={{width: 200}}/>
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row >
                            <Col span={6}>
                                <FormItem {...formItemLayout} label={'付汇账号'}>
                                    {getFieldDecorator('payaccount', {initialValue: search.payaccount})(
                                        <Input style={{width: 200}}/>
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={5}>
                                <FormItem  {...formItemLayout} label={'收汇时间'}>
                                    {getFieldDecorator('rectime', {initialValue:
                                        [ search.beginTime == '' ? '' : moment(search.beginTime, dateFormat), search.endTime == '' ? '' :moment(search.endTime, dateFormat)]})(
                                        <RangePicker
                                            showTime={{ format: 'YYYY-MM-DD' }}
                                            format="YYYY-MM-DD"
                                            placeholder={['开始时间', '结束时间']}
                                        />
                                    )}
                                </FormItem>
                            </Col>
                        </Row>

                        <Row>
                            <Col span={6}>
                                <FormItem
                                    {...formItemLayout}
                                    label={'状态'}
                                >
                                    {getFieldDecorator('status', {
                                        initialValue: search.status == undefined ? "0" : search.status
                                    })(
                                        <RadioGroup style={{width: 800}} >
                                            <Radio value="0">全部</Radio>
                                            <Radio value="1">待结汇</Radio>
                                            <Radio value="3">待认领复核</Radio>
                                        </RadioGroup>
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={6} style={{textAlign: 'right'}}>
                                <Button type="primary" icon="search" style={{marginRight: 5}} onClick={handleSearch}>查询</Button>
                                <Button icon="plus" onClick={handleAdd}>新增外汇</Button>
                            </Col>
                        </Row>
                    </div>
                </Form>
            </div>
        );
    });

    return (
        <div>
            <EditForeignExchange visible={editModel.showStatus} model={editModel} title={editModel.title} confirmLoading={editModel.confirmLoading} dispatch={dispatch}/>

            <SearchForm/>

            <Table dataSource={list} columns={columns} bordered={false} size={'middle'} scroll={{y: 500}} pagination={{
                showTotal: total => `共 ${total} 条数据`,
                pageSize: page.size,
                total: page.totalRow,
                showSizeChanger: true,
                onShowSizeChange: (current, size) => {
                    let newPage = page;
                    newPage.size = size;
                    newPage.page = 1;
                    dispatch({
                        type: 'foreignExchangeManage/setPage', payload: {
                            page: newPage
                        }
                    });
                },
                onChange: (pageNumber, pageSize) => {
                    let newPage = page;
                    newPage.page = pageNumber;
                    dispatch({
                        type: 'foreignExchangeManage/setPage', payload: {
                            page: newPage
                        }
                    });
                    dispatch({type: 'foreignExchangeManage/getForexList'});
                }
            }}/>
        </div>
    );
}

const EditForeignExchange = ({visible, title, dispatch, confirmLoading, model}) => {

    if (model.step == 1) {
        return foreignExchange({visible, title, dispatch, confirmLoading, model});
    } else if (model.step == 2) {
        return foreignExchangeApproval({visible, title, dispatch, confirmLoading, model});
    } else {
        return foreignExchangeSettlement({visible, title, dispatch, confirmLoading, model});
    }

    return nullEmpty();

    // return (
    //     <Modal visible={visible} title={title} width={model.width} wrapClassName="vertical-center-modal" onCancel={() => {
    //         dispatch({
    //             type: 'foreignExchangeManage/setEditModel',
    //             payload: {
    //                 showStatus: false
    //             }
    //         });
    //     }} footer={(() => {
    //
    //         if(model.step == 1) {
    //             return [
    //                 <Button key="back" size="large" onClick={() => {
    //                     dispatch({
    //                         type: 'foreignExchangeManage/setEditModel',
    //                         payload: {
    //                             showStatus: false
    //                         }
    //                     });
    //                 }}>取消</Button>,
    //                 <Button key="submit" type="primary" size="large" loading={confirmLoading} onClick={() => {
    //
    //                     // validateFields((errors, values) => {
    //                     //     console.info(values);
    //                     // });
    //
    //                     // dispatch({
    //                     //     type: 'foreignExchangeManage/addForex',
    //                     //     payload: {
    //                     //         payaccount: false,
    //                     //         payman: false,
    //                     //         rectime: false,
    //                     //         recamount: false,
    //                     //         recamountunit: false,
    //                     //         recaccount: false,
    //                     //         settlement: false,
    //                     //         memo: false,
    //                     //     }
    //                     // });
    //
    //                     console.info(WrappedForm);
    //                 }}>提交</Button>
    //             ];
    //         } else if(model.step == 2) {
    //             return [
    //                 <Button key="back" size="large" onClick={() => {
    //                     dispatch({
    //                         type: 'foreignExchangeManage/setEditModel',
    //                         payload: {
    //                             showStatus: false
    //                         }
    //                     });
    //                 }}>取消</Button>,
    //                 <Button key="submit" type="primary" size="large" loading={confirmLoading} onClick={() => {
    //                     dispatch({
    //                         type: 'foreignExchangeManage/setEditModel',
    //                         payload: {
    //                             confirmLoading: false,
    //                             showStatus: false
    //                         }
    //                     });
    //                 }}>外汇认领审核</Button>
    //             ];
    //         } else if(model.step == 3) {
    //             if(model.form.type == "view"){
    //                 return [
    //                     <Button key="back" size="large" onClick={() => {
    //                         dispatch({
    //                             type: 'foreignExchangeManage/setEditModel',
    //                             payload: {
    //                                 showStatus: false
    //                             }
    //                         });
    //                     }}>确定</Button>
    //                     ];
    //             }else{
    //                 return [
    //                     <Button key="back" size="large" onClick={() => {
    //                         dispatch({
    //                             type: 'foreignExchangeManage/setEditModel',
    //                             payload: {
    //                                 showStatus: false
    //                             }
    //                         });
    //                     }}>取消</Button>,
    //                     <Button key="submit" type="primary" size="large" loading={confirmLoading} onClick={() => {
    //                         dispatch({
    //                             type: 'foreignExchangeManage/setEditModel',
    //                             payload: {
    //                                 confirmLoading: false,
    //                                 showStatus: false
    //                             }
    //                         });
    //                     }}>结汇</Button>
    //                 ];
    //             }
    //         }
    //     })()}>
    //         {(() => {
    //             if(model.step == 1) {
    //                 // return foreignExchange({visible, title, dispatch, confirmLoading, model});
    //             } else if(model.step == 2) {
    //                 return foreignExchangeApproval();
    //             } else if(model.step == 3) {
    //                 return foreignExchangeSettlement({visible, title, dispatch, confirmLoading, model});
    //             }
    //         })()}
    //     </Modal>
    // );
}

/**
 * 外汇表单
 *
 * @returns {XML}
 */
const foreignExchange = ({visible, title, dispatch, confirmLoading, model}) => {

    const formItemLayout = {
        labelCol: {
            xs: {span: 24},
            sm: {span: 6},
        },
        wrapperCol: {
            xs: {span: 24},
            sm: {span: 14},
        }
    };

    const WrappedForm = Form.create()(({form}) => {
        const {getFieldDecorator, validateFields} = form;


        return (

            <Modal visible={visible} title={title} confirmLoading={confirmLoading} width={model.width} wrapClassName="vertical-center-modal" onCancel={
                () => {
                    dispatch({
                        type: 'foreignExchangeManage/setEditModel',
                        payload: {
                            showStatus: false
                        }
                    });
                }
            } onOk={
                () => {
                    validateFields((errors, values) => {
                        if (errors) {
                            return
                        }
                        console.info(model);
                        if (model.type === "add") {
                            dispatch({
                                type: 'foreignExchangeManage/addForex',
                                payload: {
                                    payaccount: values.payaccount,
                                    payman: values.payman,
                                    rectime: values.rectime,
                                    recamount: values.recamount,
                                    recamountunit: values.recamountunit,
                                    recaccount: values.recaccount,
                                    settlement: values.settlement,
                                    memo: values.memo
                                }
                            });
                        }
                    });
                }
            }>

                <Form>
                    <Row>
                        <Col span={12}>

                            <FormItem
                                {...formItemLayout}
                                label="收汇金额"
                                hasFeedback
                            >
                                {getFieldDecorator('recamount', {
                                    rules: [{
                                        required: true, message: '请输入收汇金额',
                                    }],
                                })(
                                    <InputNumber style={{width: '100%'}}/>
                                )}
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem
                                {...formItemLayout}
                                label="币种"
                                hasFeedback
                            >
                                {getFieldDecorator('recamountunit', {
                                    rules: [{
                                        required: true, message: '请输入币种',
                                    }],
                                })(
                                    <CurrencySelect  style={{width: '100%'}} />
                                )}
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={12}>
                            <FormItem
                                {...formItemLayout}
                                label="付汇人"
                                hasFeedback
                            >
                                {getFieldDecorator('payman', {
                                    rules: [{
                                        required: true, message: '请输入付汇人',
                                    }],
                                })(
                                    <Input/>
                                )}
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem
                                {...formItemLayout}
                                label="付汇账号"
                                hasFeedback
                            >
                                {getFieldDecorator('payaccount', {
                                    rules: [{
                                        required: true, message: '请输入付汇账号',
                                    }],
                                })(
                                    <Input/>
                                )}
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={12}>
                            <FormItem
                                {...formItemLayout}
                                label="收汇方式"
                                hasFeedback
                            >
                                {getFieldDecorator('settlement', {
                                    rules: [{
                                        required: true, message: '请输入收汇方式',
                                    }],
                                })(
                                    <BizParams sprCode={"settlement"} style={{width:'100%'}} />
                                )}
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem
                                {...formItemLayout}
                                label="收款账号"
                                hasFeedback
                            >
                                {getFieldDecorator('recaccount',{
                                    rules: [{
                                        required: true, message: '请输入收款账号',
                                    }],
                                })(
                                    <Select>
                                        <Option value="1">633333333333333333</Option>
                                    </Select>
                                )}
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={12}>
                            <FormItem
                                {...formItemLayout}
                                label="收汇日期"
                                hasFeedback
                            >
                                {getFieldDecorator('rectime', {
                                    rules: [{
                                        required: true, message: '请输入收汇日期',
                                    }],
                                })(
                                    <DatePicker style={{width: '100%'}}/>
                                )}
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem
                                {...formItemLayout}
                                label="备注"
                                hasFeedback
                            >
                                {getFieldDecorator('memo', {
                                })(
                                    <Input type={'textarea'}/>
                                )}
                            </FormItem>
                        </Col>
                    </Row>
                </Form>
            </Modal>
        );
    });

    return (
        <div>
            <WrappedForm/>
        </div>
    );
};

/**
 * 外汇结汇
 *
 * @returns {XML}
 */
const foreignExchangeSettlement = ({visible, title, dispatch, confirmLoading, model}) => {

    const formItemLayout = {
        labelCol: {
            xs: {span: 24},
            sm: {span: 6},
        },
        wrapperCol: {
            xs: {span: 24},
            sm: {span: 14},
        }
    };
    let xform = model.form;

    const WrappedForm = Form.create()(({form}) => {
        const {getFieldDecorator,  validateFields} = form;

        return (

            <Modal visible={visible} title={title} confirmLoading={confirmLoading} width={model.width} wrapClassName="vertical-center-modal" onCancel={
                () => {
                    dispatch({
                        type: 'foreignExchangeManage/setEditModel',
                        payload: {
                            showStatus: false
                        }
                    });
                }
            } onOk={
                () => {
                    validateFields((errors, values) => {
                        if (errors) {
                            return
                        }

                        if(xform.type == "exchange"){
                            dispatch({
                                type: 'foreignExchangeManage/exchange',
                                payload: {
                                    id: xform.id,
                                    bankexchangeamount: values.bankexchangeamount,
                                    cstexchangeamount: values.cstexchangeamount,
                                    bankexchangerate: values.bankexchangerate,
                                    cstexchangerate: values.cstexchangerate,
                                    exchangetime: values.exchangetime.format(dateFormat),
                                    exchangefilename: values.exchangefilename,
                                    exchangeurl: values.exchangeurl

                                }
                            });
                        }else{
                            dispatch({
                                type: 'foreignExchangeManage/setEditModel',
                                payload: {
                                    showStatus: false
                                }
                            });
                        }

                    });
                }
            }>


                <Row>
                    <Col span={12}>
                        <FormItem
                            {...formItemLayout}
                            label="收汇日期"
                            hasFeedback
                        >
                            {getFieldDecorator('rectime', {
                                initialValue: xform.rectime
                            })(
                                <Input disabled={true}/>
                            )}
                        </FormItem>
                    </Col>
                    <Col span={12}>
                        <FormItem
                            {...formItemLayout}
                            label="收汇金额(币种)"
                            hasFeedback
                        >
                            {getFieldDecorator('recamount', {
                                initialValue: xform.recamount
                            })(
                                <Input disabled={true}/>
                            )}
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span={12}>
                        <FormItem
                            {...formItemLayout}
                            label="付汇人"
                            hasFeedback
                        >
                            {getFieldDecorator('payman', {
                                initialValue: xform.payman
                            })(
                                <Input disabled={true}/>
                            )}
                        </FormItem>
                    </Col>
                    <Col span={12}>
                        <FormItem
                            {...formItemLayout}
                            label="付汇账号"
                            hasFeedback
                        >
                            {getFieldDecorator('payaccount', {
                                initialValue: xform.payaccount
                            })(
                                <Input disabled={true}/>
                            )}
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span={12}>
                        <FormItem
                            {...formItemLayout}
                            label="收汇方式"
                            hasFeedback
                        >
                            {getFieldDecorator('settlement', {
                                initialValue: xform.settlement
                            })(
                                <BizParams sprCode={"settlement"} style={{width:'100%'}} disabled={true}/>
                            )}
                        </FormItem>
                    </Col>
                    <Col span={12}>
                        <FormItem
                            {...formItemLayout}
                            label="收款账号"
                            hasFeedback
                        >
                            {getFieldDecorator('recaccount',{
                                initialValue: xform.recaccount
                            })(
                                <Input disabled={true}/>
                            )}
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span={12}>
                        <FormItem
                            {...formItemLayout}
                            label="备注"
                            hasFeedback
                        >
                            {getFieldDecorator('memo', {
                                initialValue: xform.memo
                            })(
                                <Input disabled={true}/>
                            )}
                        </FormItem>
                    </Col>
                </Row>
                <Tabs tabPosition={'top'}>
                    <TabPane tab="结汇信息" key="1">
                        <Form>
                            <Row>
                                <Col span={12}>
                                    <FormItem
                                        {...formItemLayout}
                                        label="结汇日期"
                                        hasFeedback
                                    >

                                        <div>
                                            {getFieldDecorator('exchangetime', {
                                                rules: [{
                                                    required: true, message: '请选择结汇日期',
                                                }],
                                                initialValue: (xform.exchangetime == '' || xform.exchangetime == null)? '' : moment(xform.exchangetime, dateFormat)
                                            })(
                                                <DatePicker
                                                    style={{width: '100%'}}
                                                    showTime={{ format: 'YYYY-MM-DD' }}
                                                    format="YYYY-MM-DD"
                                                    placeholder="请选择时间"
                                                    disabled={xform.type == "view" ?  true : false} />
                                            )}
                                        </div>

                                    </FormItem>
                                </Col>
                                <Col span={12}>
                                    <FormItem
                                        {...formItemLayout}
                                        label="银行结汇汇率"
                                        hasFeedback
                                    >

                                        <div>
                                            {getFieldDecorator('bankexchangerate', {
                                                rules: [{
                                                    required: true, message: '请输入银行结汇汇率',
                                                }],
                                                initialValue: xform.bankexchangerate

                                            })(
                                                <InputNumber style={{width: '100%'}} disabled={xform.type == "view" ?  true : false} />
                                            )}
                                        </div>
                                    </FormItem>
                                </Col>
                            </Row>
                            <Row>
                                <Col span={12}>
                                    <FormItem
                                        {...formItemLayout}
                                        label="银行结汇金额"
                                        hasFeedback
                                    >

                                        <div>
                                            {getFieldDecorator('bankexchangeamount', {
                                                rules: [{
                                                    required: true, message: '请输入银行结汇金额',
                                                }],
                                                initialValue: xform.bankexchangeamount
                                            })(
                                                <InputNumber style={{width: '100%'}} disabled={xform.type == "view" ?  true : false}/>
                                            )}
                                        </div>
                                    </FormItem>
                                </Col>
                                <Col span={12}>
                                    <FormItem
                                        {...formItemLayout}
                                        label="客户结汇汇率"
                                        hasFeedback
                                    >
                                        <div>
                                            {getFieldDecorator('cstexchangerate', {
                                                rules: [{
                                                    required: true, message: '请输入客户结汇汇率',
                                                }],
                                                initialValue: xform.cstexchangerate
                                            })(
                                                <InputNumber style={{width: '100%'}} disabled={xform.type == "view" ?  true : false}/>
                                            )}
                                        </div>
                                    </FormItem>
                                </Col>
                            </Row>
                            <Row>
                                <Col span={12}>
                                    <FormItem
                                        {...formItemLayout}
                                        label="客户结汇金额"
                                        hasFeedback
                                    >
                                        <div>
                                            {getFieldDecorator('cstexchangeamount', {
                                                rules: [{
                                                    required: true, message: '请输入客户结汇金额',
                                                }],
                                                initialValue: xform.cstexchangeamount
                                            })(
                                                <InputNumber style={{width: '100%'}} disabled={xform.type == "view" ?  true : false}/>
                                            )}
                                        </div>
                                    </FormItem>

                                </Col>
                            </Row>
                        </Form>
                    </TabPane>
                </Tabs>
            </Modal>
        );
    });
    return (
        <div>
            <WrappedForm/>
        </div>
    );
};

/**
 * 外汇认领复核
 *
 * @returns {XML}
 */
const foreignExchangeApproval = ({visible, title, dispatch, confirmLoading, model}) => {

    const formItemLayout = {
        labelCol: {
            xs: {span: 24},
            sm: {span: 6},
        },
        wrapperCol: {
            xs: {span: 24},
            sm: {span: 14},
        }
    };

    let xform = model.form;
    console.info(model);
    const InfoForm = Form.create()(({form}) => {
        const {getFieldDecorator,  validateFields} = form;
        return (

            <Modal visible={visible} title={title} confirmLoading={confirmLoading} width={model.width} wrapClassName="vertical-center-modal" onCancel={
                () => {
                    dispatch({
                        type: 'foreignExchangeManage/setEditModel',
                        payload: {
                            showStatus: false
                        }
                    });
                }
            } onOk={
                () => {
                    validateFields((errors, values) => {
                        if (errors) {
                            return
                        }

                        dispatch({
                            type: 'foreignExchangeManage/approvalForex',
                            payload: {
                                forexId: xform.id,
                                entityid: xform.id,
                                approvalresult: values.approvalresult,
                                approvalmemo: values.approvalmemos
                            }
                        });
                    });
                }
            }>


                <Row>
                    <Col span={12}>
                        <FormItem
                            {...formItemLayout}
                            label="收汇日期"
                            hasFeedback
                        >
                            {getFieldDecorator('rectime', {
                                initialValue: xform.rectime
                            })(
                                <Input disabled={true}/>
                            )}
                        </FormItem>
                    </Col>
                    <Col span={12}>
                        <FormItem
                            {...formItemLayout}
                            label="收汇金额(币种)"
                            hasFeedback
                        >
                            {getFieldDecorator('recamount', {
                                initialValue: xform.recamount
                            })(
                                <Input disabled={true}/>
                            )}
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span={12}>
                        <FormItem
                            {...formItemLayout}
                            label="付汇人"
                            hasFeedback
                        >
                            {getFieldDecorator('payman', {
                                initialValue: xform.payman
                            })(
                                <Input disabled={true}/>
                            )}
                        </FormItem>
                    </Col>
                    <Col span={12}>
                        <FormItem
                            {...formItemLayout}
                            label="付汇账号"
                            hasFeedback
                        >
                            {getFieldDecorator('payaccount', {
                                initialValue: xform.payaccount
                            })(
                                <Input disabled={true}/>
                            )}
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span={12}>
                        <FormItem
                            {...formItemLayout}
                            label="收汇方式"
                            hasFeedback
                        >
                            {getFieldDecorator('settlement', {
                                initialValue: xform.settlement
                            })(
                                <BizParams sprCode={"settlement"} style={{width:'100%'}} disabled={true}/>
                            )}
                        </FormItem>
                    </Col>
                    <Col span={12}>
                        <FormItem
                            {...formItemLayout}
                            label="收款账号"
                            hasFeedback
                        >
                            {getFieldDecorator('recaccount',{
                                initialValue: xform.recaccount
                            })(
                                <Input disabled={true}/>
                            )}
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span={12}>
                        <FormItem
                            {...formItemLayout}
                            label="备注"
                            hasFeedback
                        >
                            {getFieldDecorator('memo', {
                                initialValue: xform.memo
                            })(
                                <Input disabled={true}/>
                            )}
                        </FormItem>
                    </Col>
                </Row>

                {ClaimTable()}

                <Tabs tabPosition={'top'}>
                    <TabPane tab="审核" key="1">
                        <Form>
                            <FormItem
                                {...formItemLayout}
                                label="请选择审核状态"
                                hasFeedback
                            >
                                {getFieldDecorator('approvalresult', {
                                    initialValue: '4'
                                })(
                                    <Select>
                                        <Option value="4">审核通过</Option>
                                        <Option value="5">审核失败</Option>
                                    </Select>
                                )}
                            </FormItem>
                            <FormItem
                                {...formItemLayout}
                                label="备注"
                                hasFeedback
                            >
                                {getFieldDecorator('approvalmemo', {
                                    rules: [{
                                        required: false, message: '请输入备注！',
                                    }],
                                    initialValue: ''
                                })(
                                    <Input/>
                                )}
                            </FormItem>
                        </Form>
                    </TabPane>
                </Tabs>
            </Modal>
        );
    });

    const ClaimTable = () => {
        const columns = [{
            title: '认领人',
            dataIndex: 'creator',
            key: 'creator',
            width: '150px'
        }, {
            title: '认领时间',
            dataIndex: 'createtime',
            key: 'createtime',
            width: '200px'
        }, {
            title: '认领金额',
            dataIndex: 'claimamount',
            key: 'claimamount',
            width: '120px'
        }, {
            title: '认领客户',
            dataIndex: 'claimcstid',
            key: 'claimcstid',
            width: '100px'
        }];

        const list  = [];
        console.info(model);
        let page = model.page;
        return (
            <div>
                {/*<Table dataSource={list} columns={columns} bordered={true} size={'middle'} />*/}
                <Table dataSource={model.list} columns={columns} bordered={false} size={'middle'} scroll={{y: 500}} pagination={{
                    showTotal: total => `共 ${total} 条数据`,
                    pageSize: page.size,
                    total: page.totalRow,
                    current: page.page,
                    showSizeChanger: true,
                    onShowSizeChange: (current, size) => {
                        let newPage = page;
                        newPage.size = size;
                        newPage.page = 1;
                        dispatch({
                            type: 'foreignExchangeManage/setPage', payload: {
                                page: newPage
                            }
                        });
                    },
                    onChange: (pageNumber, pageSize) => {
                        let newPage = page;
                        newPage.page = pageNumber;
                        dispatch({
                            type: 'foreignExchangeManage/setEditPage', payload: {
                                page: newPage
                            }
                        });
                        dispatch({type: 'foreignExchangeManage/getForexById', payload:{id : xform.id, step : 2}});

                    }
                }}/>
            </div>
        );
    };


    return (
        <div>
            <div>
                <InfoForm/>
                {/*<ClaimTable/>*/}
            </div>
        </div>
    );
};

const nullEmpty = () => {
    return (
        <span></span>
    );
}

{/**const foreignExchangeResult = () => {
    return (<div>
        <Row>
            <Col span={3} style={{fontSize: 20, textAlign: 'center', color: 'green'}}>
                <Icon type="check-circle" />
            </Col>
            <Col span={3}>
                <div>
                    <p><b>新增外汇成功！</b></p>
                    <p>提示：您可以点击"关联订单"进行订单关联操作，方便日后对账等业务办理。</p>
                </div>
            </Col>
        </Row>
    </div>);
};**/}


export default connect(({foreignExchangeManage}) => ({foreignExchangeManage}))(ForeignExchangeManage)
